<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
  

    <!-- 总结：
        1.el俩种写法：
            el；
            v.$mount() --（用不了好像）
        2.data俩种写法：
            对象式：
            data:{
                //         name:'贾旺'
                //     }

            函数式：
            data(){
                console.log(this);  // 此处this是Vue的实例对象
                return{
                    name:'嘿嘿嘿'
                }
                
            }
        3.一个重要原则：
            Vue管理的函数不要写箭头函数，一旦写了，this不再是Vue的实例了 -->


    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    

    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  // 阻止启动时产生提示

    // 创建Vue实例
    // const v = new Vue({
    //     el:'#root',// 用于指定当前Vue实例为哪个容
    //     data:{
    //         name:'贾旺'
    //     }
    // });
    // console.log(v);
    // v.$mount('#root')


    new Vue({
        el:'#root',
        data(){
            console.log(this);  // 此处this是Vue的实例对象
            return{
                name:'嘿嘿嘿'
            }
            
        }
    })

    
</script>
</html>